<template>
    <div v-if="visible">
        <el-drawer title="换班" :append-to-body="true" :before-close="handleClose" :size="600" :visible.sync="visible"
                   direction="rtl" custom-class="drawer" :destroyOnClose="true" ref="drawer">
            <div class="drawer__content" v-loading="loading">
                <el-row>

                    <el-form :model="formSearch" :rules="rules" ref="form">
                        <el-form-item>
                            <el-input placeholder="请输入班级名称" clearable="" v-model="formSearch.class_name"
                                      class="input-with-select">
                                <el-button @click="search" slot="append" icon="el-icon-search"></el-button>
                            </el-input>
                        </el-form-item>
                    </el-form>
                </el-row>

                <el-row>

                    <el-radio-group v-model="currentRowId" style="width: 100%;">
                        <el-table ref="radioTable" highlight-current-row :data="tableData" tooltip-effect="dark" row-key="id"
                                  style="width: 100%"  @selection-change="handleRowChange">
                            <el-table-column width="55">
                                <template slot-scope="scope">
                                    <el-radio :label="scope.row.id" @change="ChangeRadioValue(scope.row.id)">
                                        <span></span>
                                    </el-radio>
                                </template>
                            </el-table-column>
                            <el-table-column prop="class_name" label="班级名称" width="120" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column prop="student_num" label="学员数">
                            </el-table-column>
                        </el-table>
                    </el-radio-group>

                    <div class="block">
                        <el-pagination @current-change="handleCurrentChange" :current-page="pageInfo.pageNumber"
                                       :page-size="pageInfo.pageSize" background layout="total, prev, pager, next"
                                       :total="pageInfo.total">
                        </el-pagination>
                    </div>
                </el-row>
                <div class="drawer__footer" style="float: right;padding-right: 10px;">
                    <el-button @click="cancelForm" size="mini">取 消</el-button>
                    <el-button type="primary" size="mini" @click="handleSubmit">保存</el-button>
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import { list,teacherShift,studentShift } from '@/api/kanke/gradeclass/gradeclass'
import {getTeacherDetail} from "@/api/kanke/teacher/teacher";

export default {
    name: 'ShiftClass',
    props: {
        visible: {
            type: Boolean,
        },
        id: {
            type: Array,   //选中的教师 或者 学员  批量
            default: []
        },
        userType:{      //1为教师  2为学生
            // type:Number,
          default: 0  
        },
        class_id:{      //当前所在班级
            // type:Number,
            default: 0
        },
        handleReload: {
            type: Function
        }
    },
    data() {
        return {
            loading: false,
            form: {
                class_id: '',
            },
            rules: {
            },
            formLabelWidth: '100px',
            dialog: true,
            tableData: [],
            formSearch: {},
            formShow: {
                id: [],
                userType: 0,
                class_id: '',
            },
            pageInfo: {
                pageNumber: 1,
                pageSize: 10
            },
            class_list: [],
            // 选中的班级
            currentRowId: null,
        }
    },
    watch: {
        id: {
            handler(newVal) {
                if (newVal) {
                    this.init()
                }
            },
            immediate: true
        }
    },
    methods: {
        init() {
            this.loading = true
            list({ ...this.formSearch, ...this.pageInfo }).then(res => {
                if (res.code == 200) {
                    this.tableData = res.data.list
                    this.pageInfo.total = res.data.total
                }
                this.loading = false
            })
        },
        handleClose(done) {
            this.$emit('update:visible', false);
        },
        handleRowChange(val){
            //this.currentRowId = val;  
        },
        ChangeRadioValue(id){
            this.currentRowId = id;
        },
        handleCurrentChange(e) {
            this.pageInfo.pageNumber = e;
            this.init();
        },
        cancelForm() {
            this.$emit('update:visible', false);
        },
        handleSubmit() {

            if(this.class_id == this.currentRowId){
                this.$message('不能选择当前所在班级');
                return false;
            }
            const params = {
                arr_ids: this.id,
                class_id: this.currentRowId,
                userType:this.userType
            }
            if(this.userType==1){
                teacherShift(params).then(res => {
                    if (res.code == 200) {
                        this.$emit('update:visible', false);
                        this.$message.success(res.msg)
                        this.$emit('handleReload')
                    }else{
                    }
                })
            }
            if(this.userType==2){
                studentShift(params).then(res => {
                    if (res.code == 200) {
                        this.$emit('update:visible', false);
                        this.$message.success(res.msg)
                        this.$emit('handleReload')
                    }else{
                    }
                })
            }

        },
        search() {
            this.loading = true
            this.pageInfo.pageNumber = 1
            list({ ...this.formSearch, ...this.pageInfo }).then(res => {
                if (res.code == 200) {
                    this.tableData = res.data.list
                }
                this.loading = false
            })
        },
        cancelClass(class_name) {
            let class_id = 0;
            for(let i=0;i<this.tableData.length;i++){
                if(this.tableData[i].class_name == class_name){
                    class_id = this.tableData[i].id;
                    break;
                }
            }
            let arr_class_ids = this.formShow.class_ids;
            let arr_class_names = this.formShow.class_names;

            this.formShow.class_ids = arr_class_ids.filter(item=>item !== class_id);
            this.formShow.class_names = arr_class_names.filter(item=> item !== class_name);
            this.tableData.forEach(row => {
                if(class_id == row.id){
                    this.$refs.multipleTable.toggleRowSelection(row, false);
                }
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.drawer {
    &__content {
        padding: 20px;
        margin-bottom: 30px;

        ::v-deep .el-select .el-input {
            width: 200px;
        }

        ::v-deep .el-icon-close {
            padding-left: 10px;
        }
    }

    &__footer {
        margin-top: 20px;
        margin-left: 50px;
    }
}
</style>